<template>
    <!-- scope.$index 表示当前行所在的下标 -->
    <!-- scope.row 表示每一条数据 -->
    <el-button type="primary" :icon="Plus" @click="addBtnFn" v-permission>添加管理员</el-button>
    <el-table :data="newTableData" style="width: 100%">
        <!-- 第一列 -->
        <el-table-column label="序号" width="180" align="center">
            <template #default="scope">
                <div style="display: flex; 
                align-items: center;
                justify-content: center;">
                    {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                </div>
            </template>
        </el-table-column>
        <!-- 第二列 -->
        <el-table-column label="姓名" width="180" align="center">
            <template #default="scope">
                <div> {{ scope.row.adminname }}</div>
            </template>
        </el-table-column>
        <!-- 第三列 -->
        <el-table-column label="权限" width="180" align="center">
            <template #default="scope">
                <!-- 超级管理员:2 管理员: 1 -->
                <!-- <el-tag class="ml-2" :type="scope.row.role == 1 ? 'success' : 'danger'">{{ scope.row.role == 1 ? '管理员' :
                        '超级管理员' }}</el-tag> -->
                <el-tag class="ml-2" type="success" v-if="scope.row.role == 1">管理员</el-tag>
                <el-tag class="ml-2" type="danger" v-else-if="scope.row.role == 2">超级管理员</el-tag>
                <el-tag v-else>其他用户</el-tag>
            </template>
        </el-table-column>
        <!-- 第四列  -->
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm title="确认要删除吗?" @confirm="delConfirmFn(scope.$index, scope.row)">
                    <template #reference>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页代码 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 8, 10]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 抽屉组件 -->
    <el-drawer v-model="drawer" direction="rtl">
        <template #header>
            <h4>{{ isAddFlag ? '添加管理员' : '编辑管理员' }}</h4>
        </template>
        <template #default>
            <el-space direction="vertical" alignment="start" fill style="width: 100%;">
                <!-- 用户名 -->
                <el-input v-model="adminname" placeholder="账户名" />
                <!-- 密码 -->
                <el-input v-model="password" placeholder="密码" />
                <!-- 角色 -->
                <el-select v-model="role" class="m-2" placeholder="请选择角色">
                    <el-option label="管理员" :value="1" />
                    <el-option label="超级管理员" :value="2" />
                </el-select>
                <!-- 树形菜单 -->
                <el-tree ref="treeRef" :data="treeData" show-checkbox node-key="path" :props="defaultProps"
                    @check="setcheckedkeysFn" />
            </el-space>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="drawer = false">取消</el-button>
                <el-button v-if="isAddFlag" type="primary" @click="addConfirm">添加确认</el-button>
                <el-button v-else type="primary" @click="editConfirm">编辑确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang='ts'>
// 导入权限页面判断
import { nopermission } from '@/utils/nopermission';
nopermission()

import { getAdminListApi } from '@/api/account';
import { ref, computed } from 'vue'
interface ItemType {
    adminid: string
    adminname: string
    checkedKeys: string[],
    password: string,
    role: number
}

// 定义数据
const tableData = ref<Array<ItemType>>([]);
// 请求数据
import { onMounted } from 'vue'
onMounted(() => {
    // 初始化获取数据列表
    getadminlistFn();
})
// 定义的获取的用户列表方法
const getadminlistFn = () => {
    getAdminListApi().then((res: any) => {
        console.log('res', res);
        if (res.code == 200) {
            tableData.value = res.data
        }

    })
}
// 分页代码
const currentPage = ref(1);  // 当前页数
const pageSize = ref(2);  // 每页条数
// 处理tableData 数据. 每页渲染当前页对应的数据
const newTableData = computed(() => {
    return tableData.value.filter((item, index) => {
        return index >= (currentPage.value - 1) * pageSize.value && index < currentPage.value * pageSize.value
    })
})
// 切换每页条数
const handleSizeChange = (val: number) => {
    // console.log('val', val);

}
// 切换当前页数
const handleCurrentChange = (val: number) => {
    // console.log('val', val);
}

// 点击删除
import { delAdminApi } from '@/api/account'
const delConfirmFn = (index: number, row: ItemType) => {
    // console.log(index, row)
    delAdminApi({
        adminid: row.adminid
    }).then(res => {
        // console.log('res', res);
        // 重新获取数据列表
        getadminlistFn()

    })
}


// 添加管理员功能
import { Plus } from '@element-plus/icons-vue';
// 用户名
const adminname = ref('');
// 密码
const password = ref('');
// 角色
const role = ref(1);
// 树形菜单
const defaultProps = {
    children: 'children',
    label: 'label',
};
//选中的属性菜单节点
const mycheckedKeys = ref<Array<string>>([])
// 当点击树形菜单的checkbox复选框时触发
const setcheckedkeysFn = (a: any, { checkedKeys, halfCheckedKeys
}: { checkedKeys: Array<string>, halfCheckedKeys: Array<string> }) => {
    // console.log('checkedKeys', checkedKeys);
    // console.log('halfCheckedKeys', halfCheckedKeys);
    mycheckedKeys.value = checkedKeys

}
import { getTreeDataFn } from '@/utils/common';
import { menuRoutes } from '@/router/index'
const treeData = getTreeDataFn(menuRoutes)
// console.log('treeData', treeData);
import { addAdminApi } from '@/api/account'
// 是否显示抽屉
const drawer = ref(false);
// 定义一个添加/编辑的指示状态
const isAddFlag = ref(true) // true 表示添加, false 表示编辑
// 点击添加
const addBtnFn = () => {
    //01: 显示抽屉
    drawer.value = true
    //02: 清掉输入的历史记录
    adminname.value = '';
    password.value = '';
    role.value = 1;
    // 调用属性菜单实例方法清空树形菜单选中
    nextTick(() => {
        treeRef.value!.setCheckedKeys([], false)
    })
    // 03: 修改添加状态
    isAddFlag.value = true

}
// 引入提示框组件
import { ElMessage, ElTree } from 'element-plus'
// 获取属性菜单的实例对象通过ref
const treeRef = ref<InstanceType<typeof ElTree>>()
// 添加确认
const addConfirm = () => {
    // console.log(adminname.value);
    // console.log(password.value);
    // console.log(role.value);
    // console.log(mycheckedKeys.value);

    addAdminApi({
        adminname: adminname.value,
        password: password.value,
        role: role.value,
        checkedKeys: mycheckedKeys.value
    }).then((res: any) => {
        //console.log('res', res);
        // 01: 提示
        ElMessage({
            message: res.message,
            type: res.code == 200 ? 'success' : 'error',
            duration: 1000
        })

        // 02: 重新请求管理员列表数据
        if (res.code == 200) {
            getadminlistFn();
            // 03: 隐藏 抽屉
            drawer.value = false
        }
    })
}


// 编辑功能
// 点击编辑
import { nextTick } from 'vue';
const handleEdit = (index: number, row: ItemType) => {
    // console.log(index, row)
    // 01: 显示抽屉
    drawer.value = true;
    // 02: 回填数据
    adminname.value = row.adminname;
    password.value = row.password;
    role.value = row.role;
    nextTick(() => {
        treeRef.value!.setCheckedKeys(row.checkedKeys, false)
    })
    // 03: 修改添加状态
    isAddFlag.value = false
}

// 编辑确认
import { editAdminApi } from '@/api/account'
const editConfirm = () => {
    editAdminApi({
        adminname: adminname.value,
        password: password.value,
        role: role.value,
        checkedKeys: mycheckedKeys.value
    }).then((res: any) => {
        // 01: 提示
        ElMessage({
            message: res.message,
            type: res.code == 200 ? 'success' : 'error',
            duration: 1000
        })

        // 02: 重新请求管理员列表数据
        if (res.code == 200) {
            getadminlistFn()
            // 03:隐藏 抽屉
            drawer.value = false
        }
    })
}
</script>
<style lang="scss" scoped>
.el-pagination {
    margin-top: 20px;
}
</style>